{extend name="./public/base" /}
{block name="title"}会员充值{/block}
{block name="style"}
<style type="text/css">
	.content{
		text-align: center;
		margin: auto;
		background-color:#fff;
		font-size: 12px;
		color: #6e5858;
	}
	.top{
		width: 100%;
	    background-color: #ffba58;;
	    height: 35px;
	    color: #fff;
	    text-align: center;
	    line-height: 35px;
	    font-size: 14px;
	    margin-bottom: 10px;
	}
	.back{
		float: left;
	    margin-top: 8px;
	}
	.back img{
		width: 20px;
	}
	.photo{
		width: 100%;
	   /* height: 29%;*/
	   	height:600px;
	    background-color: #f3f1f114;
	    margin: auto;
	    border-radius: 15px;
	    box-shadow: 0px 5px 2px 2px #f3f1f1f5;
	}
	.tags{
		width: 90%;
	    background-color: #fff;
	    margin: auto;
	    border-radius: 15px;
	    box-shadow: 0px 5px 2px 2px #f3f1f1f5;
	    position: relative;
	    padding: 10px;
	    height:160px;
	}

	.tags img{
		width: 100%;
		height:100%;
	}

	.line{
		height: 2px;
	    background-color: #edecec;
	    margin: 20px auto;
	    width: 90%;
	}
	.line1{
		height: 2px;
	    background-color: #edecec;
	    margin: 40px auto;
	    width: 90%;
	    margin-top: -20px;
	}

	
	.info{
		width: 90%;
	    background-color: #f3f1f114;
	    margin: auto;
	    border-radius: 15px;
	    box-shadow: 0px 5px 2px 2px #f3f1f1f5;
	    position: relative;
	    top: 20px;
	}
	.info_list{
		width: 90%;
	}
	.my_info{
		width: 110%;
		padding-bottom: 30px;
	}
	.my_info .item span{
		display:  inline-block; 
		width: 30%;
	}
	.my_info .item .img{
		width: 60px;
	    height: 60px;
	    padding-left: 40px;
	    padding-right: 40px;
	}
	.my_info .item .tab{
		width: 60px;
	    height: 60px;
	    padding-left: 330px;
	}

	.my_info .item img{
		width: 100%;
		height: 100%;
	}

	.info_list .item span{
	 	display: inline-block;
	}

	.button{
		width: 100px;
		height:60px;
		text-align: center;
		line-height: 60px;
		background-color: #ff7d7d;
	    color: #fff;
	    border-radius: 25px;
	}
	.div div{
		display: inline-block;
		width: 30%;
		text-align: center;
		font-size: 12px;
	}
	.weui-cells_radio .weui-check:checked+.weui-icon-checked:before {
	    display: block;
	    content: '\EA08';
	    color: #09bb07;
	    font-size: 36px;
	}
	.button{
		width: 80%;
	    height: 40px;
	    text-align: center;
	    line-height: 40px;
	    background-color: #ffba58;
	    color: #fff;
	    border-radius: 25px;
	    margin: auto;
	    margin-top: 80px;
	}
</style>
{/block}
{block name="main"}
	<div id="app_content" class="content"> 
		<div class="top" >
			<span class="back"><img onclick="javascript:history.back(-1);" src="__STATIC__/images/back5.png" alt=""></span>
			<span>{{text}}</span>
		</div>
		<div class="tags">
			<img :src="config.image" alt="">
		</div>
		<div class="info">
			<div class="info_list">
				<div class="my_info weui-cells_radio">
					<div class="item">
						<label class="weui-cell weui-check__label div" for="x11">
						    <div class="div1">
							    一年
						    </div>
						    <div class="div2">
							   ￥<span style="color:#ff5e58">110</span>
						    </div>
						    <div class="div2">
							    <input type="radio" class="weui-check" name="radio1" id="x11" value="1">
							    <span class="weui-icon-checked"></span>
						    </div>
						</label>
					</div>
					<div class="line"></div>
					<div class="item">
						<label class="weui-cell weui-check__label div" for="x12">
						    <div class="div1">
							    6个月
						    </div>
						    <div class="div2">
							   ￥<span style="color:#ff5e58">90</span>
						    </div>
						    <div class="div2">
							    <input type="radio" class="weui-check" name="radio1" id="x12" value="2">
							    <span class="weui-icon-checked"></span>
						    </div>
						</label>
					</div>
					<div class="line"></div>
					<div class="item">
						<label class="weui-cell weui-check__label div" for="x13">
						    <div class="div1">
							    一个月
						    </div>
						    <div class="div2">
							   ￥<span style="color:#ff5e58">30</span>
						    </div>
						    <div class="div2">
							    <input type="radio" class="weui-check" name="radio1" id="x13" value="3">
							    <span class="weui-icon-checked"></span>
						    </div>
						</label>
					</div>

				</div>
			</div>
		</div>
		<div class="button" @click="pay">立即支付</div>
	</div>
{/block}
{block name="script"}
<script type="text/javascript" >
    $(document).ready(function(){ 
		var host = "http://"+document.domain+"/api.php/";
		var vm  = new Vue({
			el: '#app_content',
			data: {
			    members: [],
			    text:'会员充值',
			    config:[]
			},
		    methods:{
		        getMemberList:function(){
		        	var t = this;
		        	$.ajax({
		        		url: host+'member/list',
		        		type: 'post',
		        		dataType: 'json',
		        		data: {page: 1},
		        		success:function(data){
		        			console.log(data.code);
		        			if(data.code == 1){
		        				t.members = data.data;
		        				console.log(t.members);
		        			}
		        		},
		        		error:function(e){
		        			console.log('error'+e);
		        		}
		        	})	
		        },
		        get_config:function(){
		        	var t = this;
		        	$.ajax({
		        		url: host+'Cate/get_page',
		        		type: 'post',
		        		dataType: 'json',
		        		data:{'mark':'services'},
		        		success:function(data){
		        			console.log(data);
		        			t.config = data.data;
		        		},
		        		error:function(e){
		        			console.log('error'+e);
		        		}
		        	})	
		        },
		        pay:function(){
		        	var val = $("input[name='radio1']:checked").val();
		        	console.log(val);
		        	if(!val){
		        		$.toast('请选择开通套餐','text');
		        	}else{
		        		//调支付console.log(5346547547);
		        	}
		        }
		    },
		    mounted: function () {
	            console.log("已初始化");
	            this.get_config();
	        }

		})
		

		
	});
</script>
{/block}